import React, { useState, useEffect } from 'react'
import './navigation.css'
import d from '../../public/img/d.png'
function Navigation() {
  const [showFirst, setShowFirst] = useState(true)

  useEffect(() => {
    const timer = setInterval(() => {
      setShowFirst(prev => !prev)
    }, 1500)
    return () => clearInterval(timer)
  }, [])

  return (
    <div className="nav-header">
      <div className="nav-left">
        <img src={d} alt="logo" className="nav-logo" />
      </div>
      <div className="nav-center">
        <span className="nav-item">视频|实拍</span>
        <span className="nav-item">设计模板</span>
        <span className="nav-item">PPT</span>
        <span className="nav-item">摄影/人像</span>
        <span className="nav-item">素材导航</span>
        <span className="nav-item">...</span>
        <span className="nav-divider" />
        <span className="nav-item nav-enterprise nav-bubble-wrap">
          <span className="nav-bubble nav-bubble-enterprise">咨询企业套餐</span>
          企业站
        </span>
        <span className="nav-item nav-red">政务图库</span>
      </div>
      <div className="nav-right">
        <span className="nav-vip-tag nav-bubble-wrap">
          <span className="nav-bubble nav-bubble-vip">
            {showFirst ? '适合90%用户' : '增下载账号'}
          </span>
          企业VIP授权
        </span>
        <span className="nav-vip-tag">个人VIP</span>
        <span className="nav-login">
          <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.5XQkiQsWBCDW1NhfAvcF9gHaIj?w=180&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="avatar" className="nav-avatar" />
          登录/注册
        </span>
      </div>
    </div>
  )
}

export default Navigation
